<template>
    <el-container>
        <el-aside width="200px">
            <el-menu default-active="2" class="el-menu-vertical-demo" router>
                <el-submenu v-for="item in tableList" :key="item.index" :index="item.index">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <el-menu-item-group v-for="item2 in item.children" :key="item2.id">
                        <template slot="title">{{item2.title}}</template>
                        <el-menu-item v-for="item3 in item2.list" :index="item3.index" :key="item3.index">{{item3.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                双碳管理系统
            </el-header>
            <el-main>
                <!-- 组件缓存 -->
                <keep-alive>
                    <router-view />
                </keep-alive>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            tableList: []
        }
    },
    // 生命周期函数：组件加载时调用一次
    created() {
        // 模拟异步请求
        setTimeout(() => {
            this.tableList = [{
                index: "1",
                name: "制造执行MES",
                children: [
                    {
                        id: 1,
                        title: "质量管理",
                        list: [
                        {
                                index: "/admin/zjbc",
                                name: "质检标准",
                            },
                            {
                                index: "/admin/sccy",
                                name: "生产采样",
                            },
                            {
                                index: "/admin/zlzs",
                                name: "质量追溯",
                            },
                            {
                                index: "/admin/fcgl",
                                name: "防错管理"
                            }
                        ]
                    }

                ]
            },
            {
                index: "2",
                name: "供应链SCM",
                children: [
                    {
                        id: 2,
                        title: "销售管理",
                        list: [
                            {
                                index: "xsdd",
                                name: "销售订单",
                            },
                        ]
                    }

                ]
            },
            {
                index: "3",
                name: "系统管理",
                children: [
                    {
                        id: 3,
                        title: "用户管理",
                        list: [
                            {
                                index: "/admin/user",
                                name: "用户管理",
                            },
                        ]
                    }

                ]
            }]
        }, 3000);
    }
}
</script>

<style></style>